<template>
<h1>开关组件</h1>

  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #0aa1ed; --el-switch-off-color: gray"/>

是否为管理员  <el-switch v-model="isAdmin"/>
是否显示图片  <el-switch v-model="isShow"/>
  <hr>
  <img src="fcq.jpg" width="200" v-if="isShow">
  <hr>
  <el-switch :active-value="1" :inactive-value="0" v-model="num"> </el-switch>
  <el-switch :active-value="'1'" :inactive-value="'0'" v-model="str"> </el-switch>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(true)

const isAdmin = ref(true)
const isShow = ref()
const num = ref(0);
const str = ref('1');
</script>

<style scoped>

</style>